<template>
  <div>
    <el-dialog
      title="试题预览"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="800px"
    >
      <div v-if="dialogVisible">
        <el-descriptions border :column="1">
          <el-descriptions-item label="试题类型">
            <p style="width: 650px">{{ typeFilter(row.type) }}</p>
          </el-descriptions-item>
          <el-descriptions-item label="试题难度">
            {{ difficultyFilter(row.difficulty) }}
          </el-descriptions-item>
          <el-descriptions-item label="所属题库">
            {{ row.testQuestionBank.name }}
          </el-descriptions-item>
          <el-descriptions-item label="试题标签">
            <el-tag size="small" v-if="row.tags">{{ row.tags }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="试题状态">
            <el-tag size="small" v-if="row.status == 1" type="success"
              >正常</el-tag
            >
            <el-tag size="small" v-if="row.status == 2" type="danger"
              >禁用</el-tag
            >
          </el-descriptions-item>
          <el-descriptions-item label="试题题干">
            <p style="max-width: 660px" v-html="row.title"></p>
          </el-descriptions-item>
          <el-descriptions-item
            label="选项设置"
            v-if="row.type == 1 || row.type == 2"
          >
            <ul class="select-option">
              <li v-for="(v, i) in row.subjectOptionsVOList" :key="i">
                <span>{{ v.tag }}</span>
                <p class="sheng" v-html="v.contents"></p>
              </li>
            </ul>
          </el-descriptions-item>
          <el-descriptions-item label="试题答案" v-if="row.type != 4">
            <p style="max-width: 660px">{{ showAnswer }}</p>
          </el-descriptions-item>
          <el-descriptions-item label="试题答案" v-if="row.type == 4">
            <ul class="select-option blank-area">
              <li v-for="(v, i) in JSON.parse(row.subAnswer)" :key="i">
                <span>{{ '空格' + v.key }}</span>
                <p class="sheng">{{ v.value }}</p>
              </li>
            </ul>
          </el-descriptions-item>
          <el-descriptions-item label="答案解析">
            <p style="width: 650px">
              <span v-html="row.subAnalysis"></span>
            </p>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import questionMixin from './questionMixin'
export default {
  mixins: [questionMixin],
  data() {
    return {
      dialogVisible: false,
      row: {},
    }
  },
  computed: {
    showAnswer() {
      let answer = this.row.subAnswer
      if (this.row.type == 2) {
        answer = JSON.parse(answer).join('，')
      } else if (this.row.type == 3) {
        answer = answer == 1 ? '正确' : '错误'
      }
      return answer
    },
  },
  mounted() {
    this.$bus.$on('showDialogQuestionPreview', (v) => {
      this.getItem(v.id)
    })
  },
  beforeDestroy() {
    this.$bus.$off('showDialogQuestionPreview')
  },
  methods: {
    async getItem(id) {
      let res = await this.$store.dispatch('testSubjectsById', id)
      this.row = res.data[0]
      this.dialogVisible = true
    },
  },
}
</script>
<style scoped lang="scss">
.select-option {
  border: 1px solid #eee;
  border-bottom: 0 none;
  li {
    border-bottom: 1px solid #eee;
    height: 32px;
    line-height: 32px;
    span {
      float: left;
      width: 60px;
      text-align: center;
      background-color: #f5f5f5;
    }
    p {
      float: left;
      padding: 0 10px;
      box-sizing: border-box;
      width: 590px;
    }
  }
}
.blank-area {
  li {
    span {
      width: 120px;
    }
    p {
      width: 530px;
    }
  }
}
.select-option .sheng {
  ::v-deep p {
    display: inline !important;
  }
}
</style>